<template>
  <section v-if="order">
    <el-form label-width="100px">
      <el-form-item label="订单金额：">
        ¥ {{order.payFee.toFixed(2)}}
      </el-form-item>
      <el-form-item label="支付方式：">
        <div class="radios">
          <div v-for="type in payTypeList" :key="type.id" class="radio-box">
            <el-radio v-model="selType" :label="type.code">{{type.name}}</el-radio>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="">
        <el-button v-show="!currPay" size="mini" type="success" @click="confirmPayBtn(order)">确认支付</el-button>
      </el-form-item>
      <el-form-item  label="请付款：" v-if="currPay">
        <div v-if="currPay.payType.code === 'balance'">
          <el-form label-width="60">
            <el-form-item label="应收：">
              ¥ {{currPay.payPrice.toFixed(2)}}
            </el-form-item>
            <el-form-item label="现金：">
              ¥ <el-input size="mini" style="width: 160px" v-model="currPay.balanceMoney"/>
            </el-form-item>
            <el-form-item label="找零：">
              ¥ {{(currPay.balanceMoney-currPay.payPrice).toFixed(2)}}
            </el-form-item>
            <el-form-item label="">
              <el-button size="mini" type="success" @click="toPayBtn(currPay)">确认</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-else-if="currPay.payType.code === 'wxpay_micropay'">
          <el-input size="mini" style="width: 160px" v-model="currPay.authCode"  @keydown.native.prevent.enter="toPayBtn(currPay)"/>
          <i class="el-icon-check"  @click="toPayBtn(currPay)"/>
        </div>
        <div v-else>
          该支付方式未开通，请重新选择。
        </div>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import errHandler from '@/assets/errHandler'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  export default {
    name: "order-pay",
    props:['orderId'],
    data(){
      return{
        order:null,
        payTypeList:[],
        selType:null,
        currPay:null
      }
    },
    watch:{
      orderId(nv,ov){
        if(nv) this.init(nv)
      },
      selType(nv,ov){
        if(nv){
          console.log('看一下',nv)
          //判断一下支付方式是否开通或支持
          if(nv !== 'balance' && nv !=='wxpay_micropay'){
            this.$message({type:'warn',message:'尚未支持该方式，请重新选择！'})
            this.selType=null
          }
        }
      }
    },
    created(){
      this.getList()
      this.init(this.orderId)
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      init(id) {
        this.currPay=null
        this.selType=null
        this.getOrder(id)
      },
      getList(){
        this.fetch({name:"getPayTypeList",data:{}})
          .then(res=>{
            console.log('支付类型列表------',res)
            this.payTypeList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getOrder(id) {
        this.fetch({name: "getOrder", data: {id}})
          .then(res => {
            console.log('看下当前订单-----', res)
            this.order = res
          })
          .catch(err => {
            console.log(err)
            errHandler.handle(this, err)
          })
      },
      confirmPayBtn(order){
        let data={
          subject: order.id + '-' + order.memberName + '-' + order.title,
          tradeNo: JSON.stringify([order.id]),
          payTypeCode:this.selType
        }
        this.createPay(data)
        console.log('看下数据------',data)
      },
      createPay(data){
        this.fetch({name:"createPay",data})
          .then(res=>{
            console.log('创建pay成功-----',res)
            res.balanceMoney=res.payPrice
            this.currPay=res
          })
          .catch(err=>{
            console.log('创建失败',err)
            this.$emit('cancel')
            errHandler.handle(this,err)
          })
      },
      toPayBtn(pay){
        console.log('看下pay的数据-------',pay)
        let data={payNo:pay.payNo,
          authCode:pay.authCode
        }
        if(pay.authCode !== undefined) data.authCode=pay.authCode
        if(pay.balanceMoney !== undefined) data.balanceMoney=pay.balanceMoney
        this.goToPay(data)
      },
      goToPay(data){
        this.fetch({name:"toPay",data})
          .then(res=>{
            console.log('支付成功------------',res)
            if(res.data.returnCode === 'SUCCESS'){
              this.$message({type:'sucess',message:'支付成功！'})
            }
            if(res.data.state === 4){
              this.$message({type:'sucess',message:'支付成功！'})
            }
            this.$emit('cancel')
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
    }
  }
</script>

<style scoped>
  .radios{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .radio-box{
    width: 50%;
  }
</style>
